<template>
  <div v-loading="commentLoading">
    <div v-if="current == commentId" class="write-comment">
      <comment-form @send="(data) => confirmComment(data)"></comment-form>
    </div>

    <div v-if="commentList[0] || newComment[0]" class="mobile-comment">
      <!-- 新评论 -->
      <div v-if="newComment[0]" class="new-comment">
        <div v-for="(item, index) in newComment" :key="index" class="item">
          <html-text :content="item.html"></html-text>
        </div>
      </div>
      <div v-if="newComment[0] && commentList[0]" class="comment-border"></div>
      <!-- 评论列表 -->
      <div
        @click="openReply(item)"
        v-for="(item, index) in commentList"
        :key="index"
        v-loading="item.loading"
      >
        <div class="item">
          <html-text :content="item.html"></html-text>
        </div>
        <div v-if="current == item.commentId" class="write-comment">
          <comment-form
            :placeholder="placeholder"
            @send="(data) => confirmReply(data, item)"
            emoticonClass="dynamic-text-emoticon"
          ></comment-form>
        </div>
      </div>

      <div
        @click="byIdGetAllCommentList"
        v-if="total > commentList.length"
        class="more"
      >
        还有{{ total - commentList.length }}条
        <i v-if="loading" class="el-icon-loading"></i>
        <i v-else class="el-icon-arrow-down"></i>
      </div>
    </div>
  </div>
</template>

<script>
import commentForm from "../comment-form/comment-form";
import htmlText from "@/components/html-text/html-text";

export default {
  name: "WorkspaceJsonFileComment",
  components: {
    commentForm,
    htmlText,
  },
  props: {
    current: {
      default: "",
    },
    commentId: {
      default: "",
    },
    total: {
      default: 0,
    },
    lists: {
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      commentList: [],
      loading: false,
      postData: {
        type: 2,
        targetId: "",
        pageSize: 5,
        pageIndex: 1,
      },
      // 发布 / 回复
      commentLoading: false,
      publishComment: {
        targetId: "",
        parentId: "",
        type: "2",
        content: "",
      },
      newComment: [],
      placeholder: "",
    };
  },
  watch: {
    lists: {
      deep: true,
      immediate: true,
      handler() {
        this.commentList = this.formatData(this.lists);
      },
    },
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  mounted() {
    this.postData.targetId = this.commentId;
    this.publishComment.targetId = this.commentId;
  },
  methods: {
    byIdGetAllCommentList() {
      this.loading = true;
      if (this.commentList.length >= this.total) return;
      this.postData.pageIndex += 1;
      this.$http("byIdGetAllCommentList", this.postData).then((res) => {
        let list = this.formatData(res.data.lists);
        this.commentList = [...this.commentList, ...list];
        this.loading = false;
      });
    },
    // 确认发送评论
    confirmComment(data) {
      this.commentLoading = true;
      this.publishComment.parentId = "";
      this.publishComment.content = data.content;
      this.$http("publishComment", this.publishComment).then((res) => {
        let list = this.formatData([res.data]);
        this.newComment.push(list[0]);
        this.commentLoading = false;
        this.$emit("change", "");
      });
    },

    // 回复
    openReply(item) {
      this.$emit("change", item.commentId);
      this.placeholder = `回复 : ${item.nickname}`;
      this.publishComment.parentId = item.commentId;
      item.isReply = true;
    },
    // 确认回复
    confirmReply(data, item) {
      item.loading = true;
      this.publishComment.content = data.content;
      this.$http("publishComment", this.publishComment).then((res) => {
        let list = this.formatData([res.data]);
        this.newComment.push(list[0]);
        item.loading = false;
        this.$emit("change", "");
      });
    },
    formatData(list) {
      list.forEach((item) => {
        item.isReply = false;
        item.loading = false;
        let isblogger = "(博主)";
        if (item.role == 1) isblogger = "";
        if (item.parentId) {
          item.html = `<span style="color: #607199;">${
            item.nickname || "- -"
          }${isblogger}</span> 回复 <span style="color: #607199;">${
            item.parentNickname || "- -"
          }</span> : ${item.content}`;
        } else {
          item.html = `<span style="color: #607199;">${
            item.nickname || "- -"
          }${isblogger}</span> : ${item.content}`;
        }
      });
      return JSON.parse(JSON.stringify(list));
    },
  },
};
</script>

<style lang="scss" scoped>
.mobile-comment {
  background: #f7f7f7;
  padding: 10px 0;
  border-radius: 6px;
  margin-top: 20px;
}

.comment-border {
  border-bottom: 1px solid #fff;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.item {
  font-size: 15px;
  color: #333333;
  line-height: 28px;
  padding: 0 10px;
  .name {
    color: #607199;
  }
  .blogger {
    color: #607199;
    margin-left: 5px;
  }
}
.write-comment {
  background: #ffff;
  padding: 10px;
  margin: 5px 0;
}
.more {
  color: #999;
  font-size: 14px;
  padding: 10px;
}
</style>
